import React, { Component } from "react";
import "./public/index.css";

export default class SlideShow extends Component {
  constructor(props) {
    super(props);
    this.curIndex = 0;
    const { data } = props;
    this.count = data.length;
    data.forEach((slider, index) => {
      slider.action = index === 0 ? "slidein" : "goRight";
    });
    this.state = {
      sliders: data
    };
  }

  autoStep = () => {
    this.timer && clearTimeout(this.timer);
    this.timer = null;
    const curIndex = (this.curIndex + 1) % this.count;
    const { sliders } = this.state;
    sliders[curIndex].action = "goRight";
    this.setState({ sliders });

    setTimeout(() => {
      this.timer && clearTimeout(this.timer);
      this.timer = null;
      sliders[curIndex].action = "slidein";
      sliders[this.curIndex].action = "forwardout";
      this.curIndex = curIndex;
      this.setState({ sliders });
    }, 16);
  };

  goto = index => {
    if (index === this.curIndex) return;
    this.timer && clearTimeout(this.timer);
    this.timer = null;
    const { sliders } = this.state;
    const backward = index < this.curIndex;
    sliders[index].action = backward ? "goLeft" : "goRight";
    this.setState({ sliders });

    setTimeout(() => {
      this.timer && clearTimeout(this.timer);
      this.timer = null;
      sliders[this.curIndex].action = backward ? "backout" : "forwardout";
      sliders[index].action = "slidein";
      this.curIndex = index;
      this.setState(sliders);
    }, 16);
  };

  back = () => {
    this.timer && clearTimeout(this.timer);
    this.timer = null;
    const { sliders } = this.state;
    const curIndex = (this.curIndex + this.count - 1) % this.count;

    sliders[curIndex].action = "goLeft";
    this.setState({ sliders });

    setTimeout(() => {
      this.timer && clearTimeout(this.timer);
      this.timer = null;
      sliders[curIndex].action = "slidein";
      sliders[(curIndex + 1) % this.count].action = "backout";
      this.curIndex = curIndex;
      this.setState({ sliders });
    }, 16);
  };

  forward = () => {
    this.timer && clearTimeout(this.timer);
    this.timer = null;
    const { sliders } = this.state;
    const curIndex = (this.curIndex + 1) % this.count;

    sliders[curIndex].action = "goRight";
    this.setState({ sliders });

    setTimeout(() => {
      this.timer && clearTimeout(this.timer);
      this.timer = null;
      sliders[curIndex].action = "slidein";
      sliders[(curIndex + this.count - 1) % this.count].action = "forwardout";
      this.curIndex = curIndex;
      this.setState({ sliders });
    }, 16);
  };

  actions = (duration, width) => {
    return {
      slidein: () => {
        return {
          transition: `all ${duration + 0.3}s ease`,
          transform: "translate3d(0px, 0px, 0px)"
        };
      },
      forwardout: () => {
        return {
          transition: `all ${duration}s ease`,
          transform: `translate3d(-${width}, 0px, 0px)`
        };
      },
      backout: () => {
        return {
          transition: `all ${duration}s ease`,
          transform: `translate3d(${width}, 0px, 0px)`
        };
      },
      goLeft: () => {
        return {
          transition: `none 0s ease`,
          transform: `translate3d(-${width}, 0px, 0px)`
        };
      },
      goRight: () => {
        return {
          transition: `none 0s ease`,
          transform: `translate3d(${width}, 0px, 0px)`
        };
      }
    };
  };

  componentDidUpdate() {
    this.timer = setTimeout(() => {
      this.autoStep();
    }, this.props.config.gap);
  }

  componentDidMount() {
    this.timer = setTimeout(() => {
      this.autoStep();
    }, this.props.config.gap);
  }

  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
    this.timer = null;
  }

  render() {
    const { sliders } = this.state;
    const {
      config: { duration, width }
    } = this.props;
    return (
      <div className="slide-container">
        {/* 轮播图元素 */}
        {sliders.map(slider => {
          const { id, src, title, href, action } = slider;
          return (
            <div
              key={id}
              className="slide-item"
              style={this.actions(duration, width)[action]()}
            >
              <a href={href} target="_blank" rel="noreferrer">
                <img src={src} alt={title} />
                <p className="slide-title">{title}</p>
              </a>
            </div>
          );
        })}
        {/* 控制工具栏 */}
        <ul className="slide-trigger">
          {/* 后退按钮 */}
          <li onClick={this.back}>
            <svg>
              <path
                d="M 12 0 L 0 8 L 12 16"
                fill="transparent"
                stroke="white"
                stroke-width="3"
              />
            </svg>
          </li>
          {/* 定位按钮 */}
          {sliders.map((slide, index) => {
            return (
              <li
                key={index}
                onClick={() => {
                  this.goto(index);
                }}
                className={
                  "trigger-item" +
                  (index === this.curIndex ? " trigger-item-on" : "")
                }
              ></li>
            );
          })}
          {/* 前进按钮 */}
          <li onClick={this.forward}>
            <svg>
              <path
                d="M 0 0 L 12 8 L 0 16"
                fill="transparent"
                stroke="white"
                stroke-width="3"
              />
            </svg>
          </li>
        </ul>
      </div>
    );
  }
}
